<template>
  <div>
    <el-form :inline="true">
      <el-form-item label="年份：">
        <el-select v-model="year" placeholder="Select" style="width: 240px">
          <el-option v-for="item in years" :key="item" :label="item" :value="item" />
        </el-select>
      </el-form-item>
      <el-button type="primary" @click="fetchData()">查询</el-button>
      <el-button type="primary" @click="handleEdit('')">重置</el-button>
    </el-form> 
    <!-- 表格组件 -->
    <el-table :data="list" style="width: 100%">
      <!--prop 后端返回的json数据的字段名-->
     <el-table-column prop="carId" label="车辆"></el-table-column>
      <el-table-column prop="carTaskNum1" label="1月"></el-table-column>
      <el-table-column prop="carTaskNum2" label="2月"></el-table-column>
      <el-table-column prop="carTaskNum3" label="3月"></el-table-column>
      <el-table-column prop="carTaskNum4" label="4月"></el-table-column>
      <el-table-column prop="carTaskNum5" label="5月"></el-table-column>
      <el-table-column prop="carTaskNum6" label="6月"></el-table-column>
      <el-table-column prop="carTaskNum7" label="7月"></el-table-column>
      <el-table-column prop="carTaskNum8" label="8月"></el-table-column>
      <el-table-column prop="carTaskNum9" label="9月"></el-table-column>
      <el-table-column prop="carTaskNum10" label="10月"></el-table-column>
      <el-table-column prop="carTaskNum11" label="11月"></el-table-column>
      <el-table-column prop="carTaskNum12" label="12月"></el-table-column>
      <el-table-column prop="total" label="总计"></el-table-column>
    </el-table>
  </div>
</template>

  <script>
import statisticsApi from "@/api/statistics";

export default {
  data() {
    return {
      //页面数据
      list: [],
      //查询条件
      year: 2024,
      pojo: {
        status: 1
      },
      dialogFormVisible: false,
      id: "",
      years: ["2021","2022","2023","2024"]
    };
  },
  created() {
    //在创建vue实例后触发钩子函数
    this.fetchData();
  },
  methods: {
    fetchData() {
      //发起axios请求  获取后端的数据，赋值给模型
      statisticsApi.carRecord(this.year).then(response => {
        this.list = response.data;
      });

    },

    //重置
    handleEdit() {
      this.dialogFormVisible = true;
      this.year=""
    }
  }
};
</script>